<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Cache-Control" content="max-age=172800, public, must-revalidate">

    <title>Insert title here</title>
    <script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
    <script src="../../resources/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../resources/js/grid.locale-ru.js" type="text/javascript"></script>
    <script src="../../resources/js/grid.locale-ua.js" type="text/javascript"></script>
    <script src="../../resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../resources/js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-timepicker-addon.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/themes/start/ui.jqgrid.css"/>
    <style type="text/css">
        .ui-timepicker-div .ui-widget-header {
            margin-bottom: 8px;
        }

        .ui-timepicker-div dl {
            text-align: left;
        }

        .ui-timepicker-div dl dt {
            height: 25px;
        }

        .ui-timepicker-div dl dd {
            margin: -25px 0 10px 65px;
        }

        .ui-timepicker-div td {
            font-size: 90%;
        }

        .ui-jqgrid {
            font-size: 1.5em
        }

        body {
            font: 8px Arial;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {

            var imageFormatter = function(cellvalue, options, rowObject) {
                return "<img height=100 src='/worker/getImage?email=" + cellvalue + "'/>";
            };

            var jobTypesFormatter = function(cellvalue, options, rowObject) {
                var res = "";
                jQuery.each(cellvalue, function(key, value) {
                    res += "<div>" + value + "</div>";
                })
                return res;
            };

            var allJobTypes = ':All';
            $.getJSON('/getJobTypes', {}, function(data) {
                $.each(data.jobTypes, function(index, value) {
                    allJobTypes = allJobTypes + ";" + value + ":" + value;
                })

                var grid = jQuery("#workersTable").jqGrid({
                            url:'/data/workersData?q=4',
                            datatype: 'json',
                            mtype: 'GET',
                            colNames:['№', 'Фото', 'Email', 'Город', 'Имя', 'Фамилия', 'О себе', 'Icq', 'Skype', 'Phone', 'Типы работ' ],
                            colModel:[
                                {name:'idWorker',index:'idWorker', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
                                {name:'image',index:'image', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},formatter: imageFormatter},
                                {name:'email',index:'email', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},hidden:true},
                                {name:'city',index:'city', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},searchoptions:{dataInit:cityPick}},
                                {name:'firstName',index:'firstName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                                {name:'lastName',index:'lastName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                                {name:'about',index:'about', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}},
                                {name:'icq',index:'icq', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},hidden:true},
                                {name:'skype',index:'skype', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},hidden:true},
                                {name:'phone',index:'phone', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},hidden:true},
                                {name:'jobTypes',index:'jobTypes', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},formatter: jobTypesFormatter,
                                    stype:'select',
                                    edittype: 'select',
                                    searchoptions: { value: allJobTypes     }}

                            ],
                            postData: {
                            },
                            rowNum:20,
                            rowList:[20,40,60],
                            height:500,
                            autowidth: true,
                            rownumbers: true,
                            pager: '#pager',
                            sortname: 'id',
                            viewrecords: true,
                            jsonReader:{
                                root: "rows",
                                page: "page",
                                total: "total",
                                records: "records",
                                repeatitems: false,
                                id: "0"
                            },
                            footerrow: true,
                            userDataOnFooter: true,
                            loadonce:false,
                            sortorder: "asc",
                            caption:"Список работников",
                            emptyrecords: "Empty records",
                            loadonce: false,
                            // gridComplete: function() {
                            //    $('.jqgrow').click(function(e) {
                            //       //var rowEmail = $(this).attr('email');
                            //      var selr = $("#workersTable").jqGrid('getGridParam', 'selrow');
                            //     alert(selr);
                            //    var gridRow = $("#workersTable").getRowData(selr);
                            //   var rowEmail = gridRow['email'];
                            //  window.location = "/worker?email=" + rowEmail;
                            //    });
                            // },
                            ondblClickRow: function(id, rowid) {
                                var ret = $("#workersTable").getRowData(id);
                                var rowEmail = ret['email'];
                                window.location = "/worker?email=" + rowEmail;
                            },
                            loadComplete: function() {
                            }
                        });
                jQuery("#workersTable").jqGrid('navGrid', '#pager', {del:false,add:false,edit:false}, {}, {}, {}, {multipleSearch:true});
                jQuery("#workersTable").jqGrid('filterToolbar', {stringResult: true,searchOnEnter : false});
                $("#bsdata").click(function() {
                    jQuery("#workersTable").jqGrid('searchGrid',
                            {sopt:['cn','bw','eq','ne','lt','gt','ew']}
                    );
                });
            })
        });

        function cityPick(elem) {
            //jQuery(elem).attr('readonly', 'readonly');
            jQuery(elem).autocomplete({
                        source: function(request, response) {
                            jQuery.ajax({
                                        url : "/search/cities",
                                        dataType : "json",
                                        data : {
                                            term : request.term
                                            //groupId : $("#groupId").val();
                                        },
                                        success : function(data) {
                                            response(jQuery.map(data, function(item) {
                                                return {
                                                    label: item.ruName,
                                                    value: item.ruName,
                                                    id: item.idCity
                                                }
                                            }))
                                        }
                                    })
                        },
                        select: function(event, ui) {
                            if (ui.item) {

                            }
                        },
                        minLength : 2,
                        open : function() {
                            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                        },
                        close: function() {
                            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                        }
                    })
        }

    </script>
</head>
<body>
<div>
    <table id="workersTable">
    </table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
</div>
<input id="bsdata" type="submit" value="Отфильтровать"/>
</body>
</html>